import React from 'react';
import { connect } from 'dva'
import GeneralFilter from 'components/Filter/GeneralFilter'
import {
  Card,
  Button
} from 'antd'
import PageHeaderLayout from 'components/Layout/PageHeaderLayout';
import styles from './List.less';
import moment from 'moment';
import LwjTable from 'components/LwjTable/LwjTable';
import {checkAmount} from 'utils/enumConfig';

const FinancialAccountBalances = ({ location, dispatch, financialAccountBalance, loading }) => {

  const { items, pagination } = financialAccountBalance;

  const listProps = {
    dataSource: items,
    loading: loading.effects['financialAccountBalance/query'],
    pagination,
    pageChangeAction: 'financialAccountBalance/query',
    dispatch,
    location,
  };

  const breadcrumbList = [
    {
      title: '财务管理'
    }, {
      title: '门店余额'
    }
  ];

  // 定义筛选属性 表单相关
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'name',
        title: '门店',
        placeholder: '请输入门店名称'
      },
    ],
    onFilterChange(value) {
      if (value.name === "") {
        value.name = null;
      }
      dispatch({
        type: 'financialAccountBalance/query',
        payload: {
          ...value
        }
      })
    }
  }

  const onShowDetail = (record) => {
    dispatch({
      type: 'financialAccountBalance/showDetail',
      payload: {
        id: record
      }
    })
  }

  const columns = [
    {
      title: '门店帐户名称',
      dataIndex: 'name',
      key: 'name'
    }, {
      title: '余额',
      dataIndex: 'balance',
      key: 'balance',
      render: (text, record) => (
        <span>
          <a className={styles.a} onClick={() => onShowDetail(record.id)}>{record.balance.toFixed(2)}</a>
          <Button
            onClick={() => onShowDetail(record.id)}
            size="small"
            shape="circle"
            icon="search"
            style={{ marginLeft: 5 }} />
        </span>
      )
    },  {
      title: '第三方余额',
      dataIndex: 'thirdAccountBalance',
      key: 'thirdAccountBalance',
      render: (text, record) => (
        <span>
          <a className={styles.a} onClick={() => onShowDetail(record.thirdAccountId)}>{checkAmount(record.thirdAccountBalance)}</a>
          <Button
            onClick={() => onShowDetail(record.thirdAccountId)}
            size="small"
            shape="circle"
            icon="search"
            style={{ marginLeft: 5 }} />
        </span>
      )
    },  {
      title: '小程序提现账户',
      dataIndex: 'commissionAccountBalance',
      key: 'commissionAccountBalance',
      render: (text, record) => (
        <span>
          <a className={styles.a} onClick={() => onShowDetail(record.commissionAccountId)}>{checkAmount(record.commissionAccountBalance)}</a>
          <Button
            onClick={() => onShowDetail(record.commissionAccountId)}
            size="small"
            shape="circle"
            icon="search"
            style={{ marginLeft: 5 }} />
        </span>
      )
    }
  ];

  return (
    <PageHeaderLayout title="门店余额" breadcrumbList={breadcrumbList}>
      <Card bordered={false}>
        <div className={styles.tableList}>
          <GeneralFilter {...filterProps} />
          <LwjTable {...listProps} columns={columns} />
          {/* <Table
            style={{ marginBottom: 24 }}
            pagination={false}
            dataSource={items}
            columns={columns}
            rowKey="id" /> */}
        </div>
      </Card>
    </PageHeaderLayout>
  )
};

export default connect(({ financialAccountBalance, loading }) => ({ financialAccountBalance, loading }))(FinancialAccountBalances)
